import React, { useCallback, useEffect, useState, useRef } from 'react';
import * as echarts from 'echarts/core';
import { LineChart, BarChart } from 'echarts/charts'; // 导入折线图图表，图表后缀根据需要修改
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import css from './runtime.less';

export default function ({ env, data, outputs }) {
  const chartRef = useRef(null);
  const [chart, setChart] = useState<any>(null);

  useEffect(() => {
    // 在这里初始化ECharts实例
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      BarChart, // 确保这里使用了你需要的图表类型
      LineChart, // 确保这里使用了你需要的图表类型
      CanvasRenderer, // 使用Canvas渲染器
    ]);
    // 基于准备好的dom，初始化echarts实例
    const _chart = echarts.init(chartRef.current);
    // setChart(_chart);
    console.log('>>>> 加载图表', _chart);
    // 绘制图表
    _chart.setOption({
      title: {
        text: 'ECharts 条形图示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });

    // 组件卸载时，清理资源
    return () => {
      _chart.dispose();
    };
  }, []);

  // 使得图表自适应屏幕大小变化
  // useEffect(() => {
  //   const resizeChart = () => {
  //     if (myChart) {
  //       myChart.resize();
  //     }
  //   };
  //   window.addEventListener('resize', resizeChart);
  //   return () => {
  //     window.removeEventListener('resize', resizeChart);
  //   };
  // }, []);

  return (
    <div
      ref={chartRef}
      className={css.area}
      style={data.style}
    >
    </div>
  );
}